<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <div class="icon-location-box">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="location-text">云南大学呈贡校区<i class="fa fa-caret-down"></i></div>
    </header>

    <!-- search部分 -->
    <div class="search">
      <div class="search-fixed-top" ref="fixedBox">
        <div class="search-box">
          <i class="fa fa-search"></i>搜索饿了么商家、商品名称
        </div>
      </div>
    </div>

    <!-- 点餐分类部分 -->
    <ul class="foodtype">
      <li v-for="(item, index) in foodTypes" :key="index" @click="goToBusinessList">
        <img :src="item.img" :alt="item.name">
        <p>{{ item.name }}</p>
      </li>
    </ul>

    <!-- 横幅广告部分 -->
    <div class="banner" :style="{ backgroundImage: `url(${indexBanner})` }">
      <h3>品质套餐</h3>
      <p>搭配齐全吃得好</p>
      <a>立即抢购 &gt;</a>
    </div>

    <!-- 超级会员部分 -->
    <div class="supermember">
      <div class="left">
        <img :src="superMember" alt="超级会员">
        <h3>超级会员</h3>
        <p>&#8226; 每月享超值权益</p>
      </div>
      <div class="right">
        立即开通 &gt;
      </div>
    </div>

    <!-- 推荐商家部分 -->
    <div class="recommend">
      <div class="recommend-line"></div>
      <p>推荐商家</p>
      <div class="recommend-line"></div>
    </div>

    <!-- 推荐方式部分 -->
    <ul class="recommendtype">
      <li>综合排序<i class="fa fa-caret-down"></i></li>
      <li>距离最近</li>
      <li>销量最高</li>
      <li>筛选<i class="fa fa-filter"></i></li>
    </ul>

    <!-- 推荐商家列表部分 -->
    <div class="pb-16vw">
      <Shopping 
        :business-list="businesses" 
        mode="detailed" 
        @business-click="goToBusinessInfo"
      />
    </div>

    <Footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watchEffect, nextTick, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import Footer from '../components/Footer.vue'
import Shopping from '../components/Shopping.vue'

// 导入图片
import indexBanner from '@/assets/img/index_banner.png'
import superMember from '@/assets/img/super_member.png'

export default defineComponent({
  name: 'Index',
  components: {
    Footer,
    Shopping
  },
  setup() {
    const router = useRouter()
    const fixedBox = ref<HTMLElement | null>(null)
    const isScrollFixed = ref(false)

    const foodTypes = ref([
      { name: '美食', img: new URL('@/assets/img/dcfl01.png', import.meta.url).href },
      { name: '早餐', img: new URL('@/assets/img/dcfl02.png', import.meta.url).href },
      { name: '跑腿代购', img: new URL('@/assets/img/dcfl03.png', import.meta.url).href },
      { name: '汉堡披萨', img: new URL('@/assets/img/dcfl04.png', import.meta.url).href },
      { name: '甜品饮品', img: new URL('@/assets/img/dcfl05.png', import.meta.url).href },
      { name: '速食简餐', img: new URL('@/assets/img/dcfl06.png', import.meta.url).href },
      { name: '地方小吃', img: new URL('@/assets/img/dcfl07.png', import.meta.url).href },
      { name: '米粉面馆', img: new URL('@/assets/img/dcfl08.png', import.meta.url).href },
      { name: '包子粥铺', img: new URL('@/assets/img/dcfl09.png', import.meta.url).href },
      { name: '炸鸡炸串', img: new URL('@/assets/img/dcfl10.png', import.meta.url).href }
    ])

    const businesses = ref([
      {
        id: 1,
        name: '万家饺子（驼峰街店）',
        img: new URL('@/assets/img/sj01.png', import.meta.url).href,
        rating: 4.9,
        sales: 345,
        minPrice: 15,
        deliveryFee: 3,
        distance: 3.22,
        deliveryTime: 30,
        description: '各种饺子',
        promotions: [
          { type: '新', info: '饿了么新用户首单立减9元' },
          { type: '特', info: '特价商品5元起' }
        ]
      },
      {
        id: 2,
        name: '小锅饭豆腐馆（全运店）',
        img: new URL('@/assets/img/sj02.png', import.meta.url).href,
        rating: 4.9,
        sales: 345,
        minPrice: 15,
        deliveryFee: 3,
        distance: 3.22,
        deliveryTime: 30,
        description: '各种饺子',
        promotions: [
          { type: '新', info: '饿了么新用户首单立减9元' },
          { type: '特', info: '特价商品5元起' }
        ]
      },
      {
        id: 3,
        name: '麦当劳麦乐送（全运路店）',
        img: new URL('@/assets/img/sj03.png', import.meta.url).href,
        rating: 4.9,
        sales: 345,
        minPrice: 15,
        deliveryFee: 3,
        distance: 3.22,
        deliveryTime: 30,
        description: '各种饺子',
        promotions: [
          { type: '新', info: '饿了么新用户首单立减9元' },
          { type: '特', info: '特价商品5元起' }
        ]
      },
      {
        id: 4,
        name: '米村拌饭（浑南店）',
        img: new URL('@/assets/img/sj04.png', import.meta.url).href,
        rating: 4.9,
        sales: 345,
        minPrice: 15,
        deliveryFee: 3,
        distance: 3.22,
        deliveryTime: 30,
        description: '各种饺子',
        promotions: [
          { type: '新', info: '饿了么新用户首单立减9元' },
          { type: '特', info: '特价商品5元起' }
        ]
      },
      {
        id: 5,
        name: '申记串道（中海康城店）',
        img: new URL('@/assets/img/sj05.png', import.meta.url).href,
        rating: 4.9,
        sales: 345,
        minPrice: 15,
        deliveryFee: 3,
        distance: 3.22,
        deliveryTime: 30,
        description: '各种饺子',
        promotions: [
          { type: '新', info: '饿了么新用户首单立减9元' },
          { type: '特', info: '特价商品5元起' }
        ]
      }
    ])

    const handleScroll = () => {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const clientWidth = document.documentElement.clientWidth
      
      isScrollFixed.value = scrollTop > clientWidth * 0.12
    }

    // 使用 watchEffect 监听响应式变化
    watchEffect(() => {
      if (fixedBox.value) {
        if (isScrollFixed.value) {
          fixedBox.value.style.position = 'fixed'
          fixedBox.value.style.left = '0'
          fixedBox.value.style.top = '0'
          fixedBox.value.style.zIndex = '1001'
        } else {
          fixedBox.value.style.position = 'static'
        }
      }
    })

    const goToBusinessList = () => {
      router.push('/business-list')
    }

    const goToBusinessInfo = (business: any) => {
      router.push(`/business/${business.id}`)
    }

    onMounted(async () => {
      // 添加滚动监听
      window.addEventListener('scroll', handleScroll, { passive: true })
      
      // 使用 nextTick 确保DOM已渲染
      await nextTick()
      console.log('首页DOM已完全渲染')
    })

    onUnmounted(() => {
      window.removeEventListener('scroll', handleScroll)
    })

    return {
      foodTypes,
      businesses,
      fixedBox,
      isScrollFixed,
      goToBusinessList,
      goToBusinessInfo,
      indexBanner,
      superMember
    }
  }
})
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper{
  width: 100%;
  height: 100%;
}

/****************** header ******************/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  display: flex;
  align-items: center;
}
.wrapper header .icon-location-box{
  width: 3.5vw;
  height: 3.5vw;
  margin: 0 1vw 0 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 4vw;
}
.wrapper header .location-text{
  font-size: 4.5vw;
  font-weight: 700;
  color: #fff;
}
.wrapper header .location-text .fa-map-marker{
  margin-right: 1vw;
}
.wrapper header .location-text .fa-caret-down{
  margin-left: 1vw;
}

/****************** search ******************/
.wrapper .search{
  width: 100%;
  height: 13vw;
}
.wrapper .search .search-fixed-top{
  width: 100%;
  height: 13vw;
  background-color: #0097FF;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .search .search-fixed-top .search-box{
  width: 90%;
  height: 9vw;
  background-color: #fff;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3.5vw;
  color: #AEAEAE;
  font-family: "宋体";
  user-select: none;
}
.wrapper .search .search-fixed-top .search-box .fa-search{
  margin-right: 1vw;
}

/****************** 点餐分类部分 ******************/
.wrapper .foodtype{
  width: 100%;
  height: 48vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: center;
}
.wrapper .foodtype li{
  width: 18vw;
  height: 20vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}
.wrapper .foodtype li img{
  width: 12vw;
  height: 10.3vw;
}
.wrapper .foodtype li p{
  font-size: 3.2vw;
  color: #666;
}

/****************** 横幅广告部分 ******************/
.wrapper .banner{
  width: 95%;
  margin: 0 auto;
  height: 29vw;
  background-color: #F4F4F4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
  padding: 2vw 6vw;
  border-radius: 2px;
}
.wrapper .banner h3{
  font-size: 4.2vw;
  margin-bottom: 1.2vw;
}
.wrapper .banner p{
  font-size: 3.4vw;
  color: #666;
  margin-bottom: 2.4vw;
}
.wrapper .banner a{
  font-size: 3vw;
  color: #C79060;
  font-weight: 700;
}

/****************** 超级会员部分 ******************/
.wrapper .supermember{
  width: 95%;
  margin: 0 auto;
  height: 11.5vw;
  background-color: #FEEDC1;
  margin-top: 1.3vw;
  border-radius: 2px;
  color: #644F1B;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .supermember .left{
  display: flex;
  align-items: center;
  margin-left: 4vw;
  user-select: none;
}
.wrapper .supermember .left img{
  width: 6vw;
  height: 6vw;
  margin-right: 2vw;
}
.wrapper .supermember .left h3{
  font-size: 4vw;
  margin-right: 2vw;
}
.wrapper .supermember .left p{
  font-size: 3vw;
}
.wrapper .supermember .right{
  font-size: 3vw;
  margin-right: 4vw;
  cursor: pointer;
}

/****************** 推荐商家部分 ******************/
.wrapper .recommend{
  width: 100%;
  height: 14vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper .recommend .recommend-line{
  width: 6vw;
  height: 0.2vw;
  background-color: #888;
}
.wrapper .recommend p{
  font-size: 4vw;
  margin: 0 4vw;
}

/****************** 推荐方式部分 ******************/
.wrapper .recommendtype{
  width: 100%;
  height: 5vw;
  margin-bottom: 5vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.wrapper .recommendtype li{
  font-size: 3.5vw;
  color: #555;
}

/****************** 推荐商家列表部分 ******************/
/* 商家列表样式已移至 Shopping.vue 组件中 */
.wrapper :deep(.shopping-wrapper) {
  margin-bottom: 14vw;
}

.pb-16vw {
  padding-bottom: 16vw;
}
</style> 